import 'package:zhongyao/global.dart';
import 'package:flutter/material.dart';
import 'package:zhongyao/http/api.dart';
import 'package:zhongyao/page/detail.dart';
import 'package:zhongyao/page/favorite.dart';
import 'package:zhongyao/page/search.dart';

class IndexPage extends StatefulWidget {
  IndexPage({Key key}) : super(key: key);
  @override
  _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {
  var _resou = [];
  @override
  void initState() {
    resou().then((res) {
      setState(() {
        _resou = res['result'];
      });
    });
    super.initState();
  }

  List<Widget> renderResou(items) {
    List<Widget> list = [];
    for (var i = 0; i < items.length; i++) {
      list.add(InkWell(
        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => DetailPage(
                id: items[i]['id'],
              ),
            ),
          );
        },
        child: Container(
          padding: EdgeInsets.fromLTRB(10, 3, 10, 3),
          decoration: BoxDecoration(
            color: Global.backgroundColor,
            borderRadius: BorderRadius.circular(20),
          ),
          child: Text(
            items[i]['title'],
            style: TextStyle(
              color: Global.primaryColor,
              fontSize: 12,
              fontWeight: FontWeight.w500,
            ),
          ),
        ),
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage("assets/images/main_bg.png"),
          repeat: ImageRepeat.repeat,
          fit: BoxFit.fitHeight,
        ),
      ),
      child: Column(
        children: [
          SizedBox(height: Global.paddingTop + 5),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Container(
                padding: EdgeInsets.fromLTRB(10, 7, 10, 7),
                decoration: BoxDecoration(
                  color: Global.primaryColor.withOpacity(0.8),
                  borderRadius: BorderRadius.circular(40),
                ),
                child: Row(
                  children: [
                    Icon(
                      Icons.favorite,
                      color: Global.backgroundColor,
                      size: 17,
                    ),
                    SizedBox(width: 4),
                    InkWell(
                      onTap: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => FavoritePage(),
                          ),
                        );
                      },
                      child: Text(
                        '查看我的收藏',
                        style: TextStyle(
                          fontSize: 13,
                          fontWeight: FontWeight.w600,
                          color: Global.backgroundColor,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(width: 35),
            ],
          ),
          SizedBox(height: 20),
          InkWell(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => SearchPage(),
                ),
              );
            },
            child: Container(
              width: MediaQuery.of(context).size.width - 70,
              padding: EdgeInsets.all(10),
              decoration: BoxDecoration(
                border: Border.all(
                  width: 1.5,
                  color: Global.fontColor,
                ),
                borderRadius: BorderRadius.circular(10),
              ),
              child: Row(
                children: [
                  Expanded(
                    child: Text(
                      "输入中草药名称，例如 白松塔",
                      style: TextStyle(
                        fontSize: 13,
                        fontWeight: FontWeight.w600,
                        color: Global.fontSecondColor,
                      ),
                    ),
                  ),
                  Icon(
                    Icons.search,
                    color: Global.fontColor,
                    size: 20,
                  ),
                ],
              ),
            ),
          ),
          SizedBox(height: 30),
          Text(
            '热门搜索',
            style: TextStyle(
              color: Global.fontColor,
              fontSize: 18,
              fontWeight: FontWeight.w600,
            ),
          ),
          SizedBox(height: 16),
          Container(
            padding: EdgeInsets.fromLTRB(20, 10, 20, 20),
            child: Wrap(
              spacing: 10,
              runSpacing: 20,
              children: renderResou(_resou),
            ),
          )
        ],
      ),
    );
  }
}
